<script setup>
import { $Clipboard } from "@smallwei/avue";
import moreColumn from "./components/moreColumn.vue";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
const moreColumnRef = ref(null);
const optionsForm = ref({
  index: true,
  menu: undefined,
  searchMenuSpan: 8,
});
const tableData = ref([
  {
    prop: "prop1",
    label: "label1",
    type: "input",
  },
]);
onMounted(() => {
  const tableDataStr = localStorage.getItem("lbwTableData");
  if (tableDataStr) {
    tableData.value = JSON.parse(tableDataStr);
  }
});
const computedOptions = computed(() => {
  const options = {
    ...optionsForm.value,
    column: tableData.value,
  };
  return options;
});
function removeAll() {
  tableData.value = [];
}
watch(
  () => tableData,
  () => {
    localStorage.setItem("lbwTableData", JSON.stringify(tableData.value));
  },
  {
    deep: true,
  }
);
const activeName = ref("1");
const deleteRow = (scope) => {
  console.log(scope);
  tableData.value.splice(scope.$index, 1);
};
const addRow = () => {
  tableData.value.push({
    prop: "",
    label: "",
    type: "input",
  });
};
const editRow = (scope) => {
  moreColumnRef.value.showModal(scope.row, scope.$index);
  console.log(scope);
};
function copyCode() {
  let temp = JSON.stringify(computedOptions.value)
    .replaceAll('"```', "")
    .replaceAll('```"', "")
    .replaceAll('"`', "`")
    .replaceAll('`"', "`")
    .replace(/\\n/g, "")
    .replace(/\\r/g, "")
    .replace(/\\t/g, "")
    .replace(/\\f/g, "")
    .replace(/\\b/g, "")
    .replace(/\\v/g, "")
    .replace(/\\0/g, "")
    .replace(/\\x00/g, "")
    .replace(/\\u0000/g, "");
  $Clipboard({
    text: temp,
  })
    .then(() => {
      ElMessage.success({
        message: "复制成功",
        type: "success",
      });
    })
    .catch(() => {
      ElMessage.error({
        message: "复制失败",
        type: "error",
      });
    });
}
function handleRowChange(row, index) {
  tableData.value.splice(index, 1, row);
}
function moveRow(scope, direction) {
  const index = scope.$index;
  if (direction === "up" && index > 0) {
    // 移动到上方
    const item = tableData.value.splice(index, 1)[0]; // 取出要移动的元素
    tableData.value.splice(index - 1, 0, item); // 插入到上方
  } else if (direction === "down" && index < tableData.value.length - 1) {
    // 移动到下方
    const item = tableData.value.splice(index, 1)[0]; // 取出要移动的元素
    tableData.value.splice(index + 1, 0, item); // 插入到下方
  }
}
</script>

<template>
  <el-card>
    <moreColumn ref="moreColumnRef" @change="handleRowChange" />
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="options" name="1">
        <el-form :model="optionsForm" label-width="120px">
          <el-form-item label="是否要序号">
            <el-radio-group v-model="optionsForm.index">
              <el-radio :value="true">显示</el-radio>
              <el-radio :value="false">隐藏</el-radio>
              <el-radio :value="undefined">默认（隐藏）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示操作栏">
            <el-radio-group v-model="optionsForm.menu">
              <el-radio :value="true">显示</el-radio>
              <el-radio :value="false">隐藏</el-radio>
              <el-radio :value="undefined">默认（显示）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="搜索按钮宽度">
            <el-input
              v-model="optionsForm.searchMenuSpan"
              type="number"
              style="width: 100px"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="column" name="2">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="addRow">新增字段</el-button>
          <el-button type="primary" @click="removeAll()">全部清空</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <!-- <draggable></draggable> -->
          <el-table-column prop="prop" label="字段对应接口字段">
            <template #default="{ row }">
              <el-input v-model="row.prop" />
            </template>
          </el-table-column>
          <el-table-column prop="label" label="字段名label">
            <template #default="{ row }">
              <el-input v-model="row.label" />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="表单类型">
            <template #default="{ row }">
              <span>{{ row.type || "默认input" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="hide" label="是否在table中显示">
            <template #default="{ row }">
              <el-radio-group v-model="row.hide">
                <el-radio :value="false">显示</el-radio>
                <el-radio :value="true">隐藏</el-radio>
                <el-radio :value="undefined">默认显示</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="display" label="是否在form中显示">
            <template #default="{ row }">
              <el-radio-group v-model="row.display">
                <el-radio :value="false">显示</el-radio>
                <el-radio :value="true">隐藏</el-radio>
                <el-radio :value="undefined">默认显示</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="display" label="是否搜索">
            <template #default="{ row }">
              <el-radio-group v-model="row.search">
                <el-radio :value="true">显示</el-radio>
                <el-radio :value="false">隐藏</el-radio>
                <el-radio :value="undefined">默认隐藏</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template #default="scpoe">
              <el-button @click="editRow(scpoe)">编辑</el-button>
              <el-button @click="deleteRow(scpoe)">删除</el-button>
              <el-button @click="moveRow(scpoe, 'up')">上移</el-button>
              <el-button @click="moveRow(scpoe, 'down')">下移</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="addRow">新增字段</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="来这儿复制columns" name="3">
        <el-button type="primary" @click="copyCode()">复制代码</el-button>
        <pre>
          <code> {{computedOptions}} </code>
        </pre>
      </el-tab-pane>
      <el-tab-pane label="Task" name="4">Task</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<style lang="scss" scoped></style>
